<template>
	<view>
		<view class="list-item">
			<view class="list-item-t">
				<image class="list_item-img" :src="info.user.head" style="border-radius: 50%;"></image>
				<view class="list_item-header">
					<view class="list_item-header-h">
						<view class="list_item-header-h-l">
							<view class="list_item-header-h-name">
								{{info.user.nickname}}
								<image :src="ossUrl + `/static/setting/${info.user.sex === '女' ? '7' : '6'}.png`"
									mode=""></image>
								<image :src="u" mode="" style="border-radius: 50%;margin-left: 10rpx;"
									v-for="u in info.Icon"></image>
							</view>
							<view class="list_item-header-h-address">
								<image :src="ossUrl + `/static/card/2.png`" mode=""></image>
								{{ info.address || ''}}
							</view>
						</view>
						<!-- <view class="list_item-header-h-btn">
							关闭活动
						</view> -->
						<!-- <view class="list_item-header-h-img" v-if="info.type != 3">
							<image :src="ossUrl + `/static/log/1.png`" @click="del"></image>
						</view> -->
					</view>
					<view class="list_item-header-time">
						{{info.add_time}}
					</view>
				</view>
			</view>


			<view class="list-item-content">
				<rich-text :nodes="replaceEmoji(info.content)" space="nbsp"></rich-text>
			</view>

			<view class="course">
				<view class="course-list">
					<view class="course-list-item" v-for="(item,index) in info.upload" v-if="item">
						<view class="course-list-item-header" v-if="$getIsImage(item) === 1">
							<image :src="item" mode="widthFix" class="course-list-item-header-video"
								@click.stop="getPrevImg(info.upload,item)"></image>
							<!-- 	<image :src="ossUrl + `/static/index/播放.png`" mode=""
								class="course-list-item-header-play"></image> -->
						</view>
						<view class="course-list-item-header" v-if="$getIsImage(item) === 2">
							<video :src="item" style="width: 100%;height: 400rpx;"></video>
						</view>
					</view>
				</view>
			</view>
			<!-- 约球 -->
			<view class="list-item-activity" v-if="info.reservation && info.type == 3">
				<view class="list-item-activity-crad">
					<view class="list-item-activity-crad-item" @click.stop="copy(info.reservation.address)">
						地址：{{info.reservation.address}}
					</view>
					<view class="list-item-activity-crad-item">
						开始时间：{{info.reservation.event_date}} {{info.reservation.start_time}}
					</view>
					<view class="list-item-activity-crad-item" v-if="info.reservation.type == 1">
						<text>报名结束时间</text>：{{info.reservation.actitveEndTime}}
					</view>
					<view class="list-item-activity-crad-item" v-if="info.reservation.type == 1">
						<text>倒计时</text>：
						<!-- it.reservation.event_date + ' ' + it.reservation.end_time -->
						<countDownVue :time="getRemainingTimeToTimestamp(info.reservation.actitveEndTime)" />
					</view>
					<view class="list-item-activity-crad-item" @click.stop="copy(info.reservation.contact_info)">
						<text>手机号</text>：{{info.reservation.contact_info || ''}}
					</view>
					<view class="list-item-activity-crad-item">
						<text>需报名人数</text>：{{info.reservation.max_participants || 0}}人
					</view>
					
					<view class="list-item-activity-crad-item" v-if="info.reservation.minUser">
						<text>最低举办人数</text>：{{info.reservation.minUser || 0}}人
					</view>
					
					<view class="list-item-activity-crad-item" v-if="info.reservation.price">
					  <text>单人费用</text> ：{{info.reservation.price || 0}}元
					</view>
					
	
					
				</view>
				<view class="list-item-activity-people" @click="toEventRegistration(info.id)">
					<view class="list-item-activity-people-title" style="font-weight: bold;">报名表：</view>
					<!-- 看过 -->
					<view class="nums">
						<view class="nums-img">
							<image :src="item" mode="" v-for="item in info.head" style="border-radius: 50%;"></image>
						</view>
						<view class="nums-tx">等{{info.count}}人已报名</view>
					</view>
				</view>
				<view class="list-item-activity-btn-cancle" v-if="info.reservation.type == 2"
					style="color: #B8B8B8; border: 1rpx solid #B8B8B8;">
					已取消
				</view>
				<template v-else>
					<view class="list-item-activity-btn"
						v-if="getRemainingTimeToTimestamp(info.reservation.event_date + ' ' + info.reservation.start_time) > 0 && info.reservation_type != 1"
						@click="submit(info.id)">
						点击报名
					</view>
					<view class="list-item-activity-btn-cancle" v-if="info.reservation_type == 1"
						@click="cancle(info.id)">
						取消报名
					</view>
				</template>
			</view>
			<view class="list-item-score" v-if="info.time_axis && info.type == 2">
				<view class="list-item-score-list">
					<view>成绩：<text>{{info.time_axis.total_rod_number_sum}}</text></view>
					<view>距离：<text>{{info.time_axis.max_distance_avg}}</text></view>
					<view>上球道：<text>{{info.time_axis.fairway_hit_rate_percent}}</text></view>
				</view>
				<view class="list-item-score-list">
					<view>上果岭：<text>{{info.time_axis.green_in_regulation_rate_percent}}</text></view>
					<view>界外球：<text>{{info.time_axis.out_of_bounds_count_sum}}</text></view>
					<view>下水数：<text>{{info.time_axis.water_hazard_rate_percent}}</text></view>
					<view>沙坑数：<text>{{info.time_axis.sand_trap_rate_percent}}</text></view>
				</view>
				<view class="list-item-score-list">
					<view>切杆数：<text>{{info.time_axis.chip_shots_sum}}</text></view>
					<view>推杆数：<text>{{info.time_axis.putts_sum}}</text></view>
				</view>
			</view>
			<view class="list-item-activity" v-if="!(info.reservation && info.type == 3)">
				<view class="list-item-activity-people" @click="toLikeNum()">
					<view class="list-item-activity-people-title">点赞数</view>
					<!-- 看过 -->
					<view class="nums">
						<view class="nums-img">
							<image :src="item.head" mode="" v-for="item in info.like_head" style="border-radius: 50%;">
							</image>
						</view>
						<view class="nums-tx">等{{info.like_count}}人已点赞</view>
					</view>
				</view>
			</view>
			<view @click.stop>
				<productsVue v-if="!Array.isArray(info.goods) && info.business_card_id" :info="info.goods"
					:nickname="info.user.nickname" />
				<videoVue v-if="!Array.isArray(info.goods) && !info.business_card_id" :info="info.goods" />
			</view>
		</view>
		<view class="comment">
			<view class="comment-title">留言</view>
			<view class="comment-list" v-for="it in list" :key="it.id">
				<view class="comment-list-c">
					<view class="comment-list-img">
						<image :src="it.head" mode=""></image>
					</view>
					<view class="comment-list-center">
						<view class="list_item-header-h">
							<view class="list_item-header-h-l">
								<view class="list_item-header-h-name">
									{{it.nickname}}
									<image :src="ossUrl + `/static/setting/${it.sex === '女' ? '7' : '6'}.png`" mode="">
									</image>
								</view>
								<view class="list_item-header-h-address">
									<image :src="ossUrl + `/static/card/2.png`" mode=""></image>
									{{it.address}}
								</view>
							</view>
							<!-- <view class="list_item-header-h-btn">
								关闭活动
							</view> -->
							<view class="list_item-header-h-img" @click="open(it)">
								<image :src="ossUrl + `/static/setting.png`"></image>
							</view>
						</view>
						<view class="comment-list-center-content">
							{{it.content}}
						</view>
						<view class="list_item-header-h-time">{{formatTimestamp(it.add_time,1)}}</view>
					</view>
				</view>
				<view class="comment-list-layout" v-if="it.children.length > 0">
					<view class="comment-list-c" v-for="item in it.children" :key="item.id">
						<view class="comment-list-img">
							<image :src="item.head" mode=""></image>
						</view>
						<view class="comment-list-center">
							<view class="list_item-header-h">
								<view class="list_item-header-h-l">
									<view class="list_item-header-h-name">
										{{item.nickname}}
									</view>
								</view>
								<!-- <view class="list_item-header-h-btn">
									关闭活动
								</view> -->
								<view class="list_item-header-h-img" @click="open(item,it.id)">
									<image :src="ossUrl + `/static/setting.png`"></image>
								</view>
							</view>
							<view class="comment-list-center-content">
								{{item.content}}
							</view>
							<view class="list_item-header-h-time">{{formatTimestamp(item.add_time,1)}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="send">
			<input type="text" :placeholder="other ? '回复：' + other.nickname : '说点好听的' " :focus="focus"
				placeholder-class="ac" v-model="content" />
			<image :src="info.like_type == 1 ?  ossUrl + `/static/18.png` : ossUrl + `/static/17.png`" mode=""
				class="send-img_1" @click="likeRquest(params.id)"></image>
			<image :src="ossUrl + `/static/wxChat/1.png`" mode="" class="send-img_2" @click="sure"></image>
		</view>
		<u-gap :height="70"></u-gap>
		<!-- 操作菜单 -->
		<u-action-sheet :actions="listPopup" @select="select" :show="show" @close="close"></u-action-sheet>
	</view>
</template>

<script>
	import {
		InformationLogDetails,
		InformationPostMessage,
		InformationLike,
		InformationApplication,
		InformationAddMessage,
		InformationDelMessage,
		InformationReportMessage,
		InformationUserInfo,
		InformationCancellation
	} from '@/common/http/api.js'
	import countDownVue from './components/countDown.vue';
	import {
		convertToTimestamp,
		getRemainingTimeToTimestamp,
		formatTimestamp
	} from '@/common/time.js'
	import productsVue from '@/pages/circle/components/products/products.vue';
	import videoVue from '@/pages/circle/components/video/video.vue';
	export default {
		components: {
			countDownVue,
			productsVue,
			videoVue
		},
		data() {
			return {
				title: '标题',
				listPopup: [{
						name: '回复',
						color: '#292929',
						fontSize: '15'
					},
					{
						name: '举报',
						color: '#292929',
						fontSize: '15'
					},
					{
						name: '删除',
						color: '#292929',
						fontSize: '15'
					}
				],
				show: false,
				//分页
				params: {
					page: 1,
					id: ''
				},
				isList: true,
				list: [],
				info: '',
				content: '',
				other: '',
				focus: false,
				infoItem: '',
				father: '',
				userInfo: ''
			}
		},
		onLoad(e) {
			this.params.id = e.id
			InformationUserInfo().then(res => {
				this.userInfo = res.data
			})

			if (e.userId) {
				this.params['fx_type'] = JSON.stringify({
					"type": "1",
					"data": {
						"user_id": e.userId
					}
				})
			}
			this.init()
		},
		onReachBottom() {
			if (this.isList) {
				this.params.page++
				this.init()
			}
		},
		onShareAppMessage() {
			
			let img = ''
			let title = this.info.type == 3 ? this.info.reservation.title || '' : this.info.content
			let path = '/pages/loading/loading?userId=' + this.userInfo.id + '&type=4' + '&id=' + this.params.id

			//是否有上传分享图片
			if (this.info?.share_pictures) {
				img = this.info.share_pictures
			}

			return {
				title,
				path,
				imageUrl: img
			};
		},

		onAddToFavorites(res) {
			
			let img = ''
			let title = this.info.type == 3 ? this.info.reservation.title || '' : this.info.content
			let path = 'is_mixin_collect=3&userId=' + this.userInfo.id + '&type=4' + '&id=' + this.params.id
			//是否有上传分享图片
			if (this.info?.share_pictures) {
				img = this.info.share_pictures
			}
			return {
				title,
				query: path,
				imageUrl: img
			};
		},
		methods: {
			getRemainingTimeToTimestamp,
			formatTimestamp,
			formattedText(e) {
				// 替换换行符为 <br> 标签
				if (!e) return ''
				return e.replaceAll(/\n/g, '<br/>');
			},
			getPrevImg(arr, item) {

				let img = []
				arr.forEach(i => {
					if (this.$getIsImage(i) === 1) {
						img.push(i)
					}
				})
				let count = 0
				img.forEach((i, index) => {
					if (i === item) {
						count = index
					}
				})

				this.MpreviewImage(img, count)
			},
			copy(name) {
				if (name) {
					uni.setClipboardData({
						data: name,
						success: function() {
							uni.showToast({duration:3000,
								title: "已复制!",
								icon: 'none'
							})
						}
					});
				} else {
					uni.showToast({duration:3000,
						title: "暂无内容复制！"
					})
				}

			},
			cancle(id) {
				uni.showLoading()
				InformationCancellation({
					id
				}).then(res => {
					this.reload()
					uni.showToast({duration:3000,
						title: '取消成功',
						icon: 'none'
					})
				}).finally(err => {
					uni.hideLoading()
				})
			},
			toLikeNum(e) {
				uni.navigateTo({
					url: '/pagesA/numberLikes/numberLikes?id=' + this.info.id
				})
			},
			likeRquest(id) {
				uni.showLoading()
				InformationLike({
					id
				}).then(res => {
					this.reload()
				}).finally(err => {
					uni.hideLoading()
				})
			},
			reload() {
				this.list = []
				this.params.page = 1
				this.init()
			},
			init() {
				uni.showLoading()
				InformationLogDetails(this.params).then(res => {
					this.info = res.data
					if (Array.isArray(res.data.message) && res.data.message.length > 0) {
						if (this.params.page === 1) {
							this.list = res.data.message
						} else {
							this.list = this.list.concat(res.data.message)
						}
					} else {
						this.isList = false
					}
					this.$forceUpdate()
				}).finally(err => {
					uni.hideLoading()
				})
			},
			getValue(value) {
				if (value > 0) {
					return value.toFixed(2)
				}
				return 0
			},
			sure() {
				if (this.content === '') {
					uni.showToast({duration:3000,
						title: '请输入内容!',
						icon: 'none'
					})
					return
				}
				let data = {
					content: this.content,
					log_id: this.params.id
				}
				let http = InformationPostMessage
				if (this.other) {
					data['father'] = this.other.id
					http = InformationAddMessage
				}
				// console.log('data',data)
				// return 
				uni.showLoading()
				http(data).then(res => {
					uni.hideLoading()
					this.reload()
					this.content = ''
				})
			},
			submit(id) {
				uni.showLoading()
				InformationApplication({
					id
				}).then(res => {
					uni.hideLoading()
					this.reload()
					if (this.other) {
						this.other = ''
					}
					this.father = father
				})
			},
			setOther(it, father) {
				this.content = ''
				this.other = it
				if (father) {
					this.father = father
				}
				this.focus = true
			},
			open(it, father = '') {
				console.log('d')
				this.infoItem = it
				this.other = ''
				if (father) {
					this.father = father
				}

				this.show = true

			},
			close(e) {
				this.show = false
			},
			select(e) {
				console.log('点击', e)
				switch (e.name) {
					case '删除':
						uni.showLoading()
						InformationDelMessage({
							id: this.infoItem.id
						}).then(res => {
							uni.hideLoading()
							this.reload()
						})
						break;
					case '回复':
						this.content = ''
						this.other = this.infoItem
						if (this.father) {
							this.other.id = this.father
						}
						this.focus = true
						break;
					case '举报':
						uni.showLoading()
						InformationReportMessage({
							id: this.infoItem.id
						}).then(res => {
							uni.hideLoading()
							uni.showToast({duration:3000,
								title: '举报成功!',
								icon: 'none'
							})


						})
						break;
					default:
						break;
				}
			},
			del() {
				let start = this.getRemainingTimeToTimestamp(this.info.reservation.event_date + ' ' + this.info.reservation
					.start_time)
				let end = this.getRemainingTimeToTimestamp(this.info.reservation.event_date + ' ' + this.info.reservation
					.end_time)
				if (start === 0 && end > 0) {
					uni.showToast({duration:3000,
						title: '活动进行中！',
						icon: 'none'
					})
					return
				}
				uni.showLoading()
				InformationDelLog({
					id: this.info.id
				}).then(res => {
					uni.hideLoading()
					this.reload()
				})
			},
			toEventRegistration(id) {
				uni.navigateTo({
					url: '/pagesA/eventRegistration/eventRegistration?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	image {
		width: 100%;
		height: 100%;
	}

	.list-item {
		width: 100%;
		background: #FFFFFF;
		margin-bottom: 12rpx;

		box-sizing: border-box;
		padding: 28rpx 32rpx;

		.list-item-t {
			display: flex;
			align-items: center;
			margin-bottom: 25rpx;
		}

		.list_item-img {
			width: 90rpx;
			height: 90rpx;
		}

		.list_item-header {
			min-width: 0;
			flex: 1;
			margin-left: 28rpx;


			.list_item-header-time {
				font-family: PingFang SC;
				font-weight: 300;
				font-size: 22rpx;
				color: #999999;
			}
		}

		.list-item-content {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #211C1E;
			margin-bottom: 30rpx;
			white-space: pre-wrap;
		}

		.course {

			width: 100%;
			margin-bottom: 35rpx;

			.course-list {
				display: grid;
				grid-template-columns: repeat(1, 1fr);
				grid-gap: 12rpx;
			}

			.course-list-item {
				width: 100%;
				background: #F6F7F8;

				.course-list-item-header {

					width: 100%;
					position: relative;
					margin-bottom: 11rpx;

					.course-list-item-header-play {
						position: absolute;
						right: 17rpx;
						bottom: 9rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}

				.course-list-item-title {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #292B3B;
					margin-bottom: 14rpx;
					box-sizing: border-box;
					padding: 0 7rpx;
				}

				.course-list-item-footer {
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					padding: 0 7rpx;
					padding-bottom: 7rpx;

					.course-list-item-footer-status {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #FF8400;
					}

					.course-list-item-footer-nums {
						display: flex;
						justify-content: center;
						align-items: center;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #292B3B;

						image {
							width: 19rpx;
							height: 15rpx;
							margin-right: 11rpx;
						}
					}
				}
			}
		}

		.list-item-activity {
			width: 100%;
			margin-bottom: 22rpx;

			.list-item-activity-crad {
				background: #F6F7F8;
				border-radius: 33rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 24rpx 22rpx;
				margin-bottom: 25rpx;

				.list-item-activity-crad-item {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #211C1E;
					display: flex;
					align-items: center;
					margin-bottom: 33rpx;

					// &>view {
					// 	width: 47rpx;
					// 	height: 51rpx;
					// 	background: #FFFFFF;
					// 	border-radius: 12rpx;
					// 	border: 2px solid #DBDFE1;
					// 	font-family: PingFang SC;
					// 	font-weight: bold;
					// 	font-size: 28rpx;
					// 	color: #211C1E;
					// 	display: flex;
					// 	align-items: center;
					// 	justify-content: center;
					// 	margin-right: 8rpx;
					// }
				}

				.list-item-activity-crad-item:last-child {
					margin-bottom: 0;
				}

			}


			.list-item-activity-btn {
				width: 170rpx;
				height: 66rpx;
				background: #12B475;
				border-radius: 33rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				margin-bottom: 22rpx;
			}

			.list-item-activity-tx {
				margin-bottom: 22rpx;
				font-size: 28rpx;
				color: #12B475;
			}
		}

		.list-item-score {
			background: #F6F7F8;
			border-radius: 33rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 12rpx 22rpx;
			margin-bottom: 25rpx;

			.list-item-score-list {
				width: 100%;
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;

				view {
					margin-right: 30rpx;
					font-size: 22rpx;

					text {
						color: #12B475;
					}
				}
			}
		}

		.list-item-footer {
			padding-top: 24rpx;
			box-sizing: border-box;
			padding: 24rpx 24rpx 0;
			border-top: 1rpx solid #D7D7D7;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&>view {
				display: flex;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 7rpx;
				}
			}
		}
	}

	.list_item-header-h {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.list_item-header-h-l {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 16rpx;

			.list_item-header-h-name {
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				margin-right: 35rpx;

				image {
					margin-left: 14rpx;
					width: 26rpx;
					height: 26rpx;
				}
			}

			.list_item-header-h-address {
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: 300;
				font-size: 24rpx;
				color: #7A7A7A;

				image {
					margin-right: 10rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.list_item-header-h-r {
			padding: 12rpx 18rpx;
			font-family: PingFang SC;
			font-weight: 300;
			font-size: 24rpx;
			color: #999999;
		}

		.list_item-header-h-btn {
			font-size: 24rpx;
			padding: 10rpx 15rpx;
			border-radius: 40rpx;
			color: #B8B8B8;
			border: 1rpx solid #B8B8B8;
		}

		.list_item-header-h-img {
			width: 37rpx;
			height: 28rpx;
			display: flex;

			image {
				width: 30rpx;
				height: 33rpx;
			}
		}
	}

	.comment {
		width: 656rpx;
		margin: 0 auto;

		.comment-title {
			font-family: PingFang SC;
			font-weight: 600;
			font-size: 26rpx;
			color: #131313;
			margin-bottom: 56rpx;
		}

		.comment-list {
			width: 100%;
			border-bottom: 1rpx solid #D7D7D7;
			margin-bottom: 20rpx;

			.comment-list-c {
				display: flex;
				margin-bottom: 15rpx;
			}

			.list_item-header-h-name {
				font-family: PingFang SC;
				font-weight: 300;
				font-size: 26rpx;
				color: #666666;
			}

			.comment-list-img {
				width: 48rpx;
				height: 48rpx;
				margin-right: 22rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					margin-top: 7rpx;
				}
			}

			.comment-list-center {
				flex: 1;
				min-width: 0;
				box-sizing: border-box;

				.list_item-header-h-img {
					width: 37rpx;

					image {
						width: 37rpx;
						height: 8rpx;
					}
				}

				.comment-list-center-content {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #211C1E;
					margin-bottom: 17rpx;
				}

				.list_item-header-h-time {
					font-family: PingFang SC;
					font-weight: 300;
					font-size: 20rpx;
					color: #999999;
				}
			}

		}

		.comment-list-layout {
			width: 100%;
			box-sizing: border-box;
			padding-left: 92rpx;
			margin-top: 22rpx;
		}
	}

	.send {
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 44rpx;
		border-top: 1rpx solid #D7D7D7;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;

		input {
			flex: 1;
			min-width: 0;
			height: 70rpx;
			background: #F6F7F8;
			border-radius: 35rpx;
			box-sizing: border-box;
			padding: 0 36rpx;
			line-height: 70rpx;
			font-family: PingFang SC;
			font-weight: 300;
			font-size: 26rpx;
			color: #999999;
		}

		.ac {
			font-family: PingFang SC;
			font-weight: 300;
			font-size: 26rpx;
			color: #999999;
		}

		.send-img_1 {
			width: 38rpx;
			height: 36rpx;
			margin-left: 30rpx;
		}

		.send-img_2 {
			width: calc(142rpx / 1.5);
			height: calc(78rpx / 1.5);
			margin-left: 30rpx;
		}
	}

	.list-item-footer {

		&>view {
			display: flex;
			align-items: center !important;
		}
	}

	.list-item-activity-btn-cancle {
		width: 170rpx;
		height: 66rpx;
		background: #fff;
		border: 1px solid #12B475;
		border-radius: 33rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #12B475;
		margin-bottom: 22rpx;
	}

	.list-item-score {
		padding-bottom: 0 !important;

		.list-item-score-list {
			align-items: none;
			flex-wrap: wrap;
			margin-bottom: 0rpx !important;

			view {
				margin-right: 30rpx;
				padding-bottom: 22rpx;
			}
		}
	}

	.list-item-activity-people {
		width: 100%;
		margin-bottom: 22rpx;

		.list-item-activity-people-title {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #211C1E;
			margin-bottom: 31rpx;
		}

		.nums {
			width: 100%;
			height: 80rpx;
			background: #FFFFFF;
			padding: 8rpx 0;
			display: flex;
			align-items: center;
			margin: 0 auto;
			margin-bottom: 24rpx;
			border-top: 1rpx solid #e4e4e4;
			border-bottom: 1rpx solid #e4e4e4;

			.nums-img {
				//padding-left: 36rpx;
				min-width: 0;
				flex: 1;
				display: flex;
				align-items: center;

				image {
					width: 56rpx;
					height: 56rpx;
				}

				// 定义变量，设置循环次数
				$num-items: 10;

				// 循环生成样式
				@for $i from 1 through $num-items {
					image:nth-child(#{$i}) {
						transform: translateX($i * -6rpx);
					}
				}
			}

			.nums-tx {
				// width: 130rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #211C1E;
			}
		}
	}
</style>